<template>
  <div>
    <el-breadcrumb separator="|">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>文章管理</el-breadcrumb-item>
      <el-breadcrumb-item>分类管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 工具栏 -->
    <div class="toolBar">
      <el-button type="primary" plain @click="showSave">添加</el-button>
      名称：<el-input
        label="关键字"
        v-model="keyword"
        placeholder="请输入分类名称"
        size="medium"
        @input="pageIndex = 1"
      >
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>
    <!-- 数据表格 -->
    <el-table :data="CategoryList" style="width: 100%" v-loading="loading">
      <el-table-column prop="Cover" label="封面" width="200">
        <template slot-scope="scope">
          <img :src="scope.row.Cover" v-if="scope.row.Cover" height="30px" />
        </template>
      </el-table-column>
      <el-table-column prop="Name" label="分类"> </el-table-column>
      <el-table-column width="200" label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="updateCategory(scope.row)"
            >修改</el-button
          >
          <el-button type="text" @click="delCategory(scope.row.Id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="selectList.length"
      :page-size="7"
      @current-change="changePages"
      :current-page="pageIndex"
    >
    </el-pagination>
    <!-- 上传数据 -->
    <el-dialog title="添加分类" :visible.sync="dialogFormVisible">
      <el-form v-model="form">
        <el-form-item label="封面">
          <el-upload
            class="avatar-uploader"
            action="http://127.0.0.1:8080/Category/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="form.coverUrl" :src="form.coverUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="分类">
          <el-input v-model="form.Name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false"> 取 消 </el-button>
        <el-button type="primary" @click="saveCategory"> 确 定 </el-button>
      </div>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog title="修改分类" :visible.sync="dialogUpdateVisible">
      <el-form v-model="updateForm">
        <el-form-item label="封面">
          <el-upload
            class="avatar-uploader"
            action="http://127.0.0.1:8080/Category/updateImg"
            :show-file-list="false"
            :on-success="handleUpdateSuccess"
          >
            <img
              v-if="updateForm.Cover"
              :src="updateForm.Cover"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="分类">
          <el-input v-model="updateForm.Name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogUpdateVisible = false"> 取 消 </el-button>
        <el-button type="primary" @click="saveUpdate"> 确 定 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "CategoryPart",
  data() {
    return {
      loading: true,
      keyword: "",
      dialogFormVisible: false,
      dialogUpdateVisible: false,
      list: [],
      pageIndex: 1,
      form: {
        coverUrl: "",
        Name: "",
      },
      updateForm: {
        Id: "",
        Cover: "",
        Name: "",
      },
    };
  },
  computed: {
    selectList() {
      return this.list.filter((p) => {
        return p.Name.indexOf(this.keyword) != -1;
      });
    },
    CategoryList() {
      let startNum = (this.pageIndex - 1) * 7;
      let endNum = this.pageIndex * 7;
      return this.selectList.slice(startNum, endNum);
    },
  },
  methods: {
    //打开添加
    showSave() {
      this.dialogFormVisible = true;
      this.form = {
        coverUrl: "",
        Name: "",
      };
    },
    //获取分类数据
    getCategory() {
      this.axios
        .get("http://127.0.0.1:8080/Category/Category")
        .then((res) => {
          this.list = res.data.recordset;
          this.loading = false;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    //保存分类数据
    saveCategory() {
      this.loading = true;
      this.axios({
        method: "post",
        url: "http://127.0.0.1:8080/Category/add",
        headers: {
          "content-type": "application/x-www-form-urlencoded",
        },
        params: {
          Name: this.form.Name,
          coverUrl: this.form.coverUrl,
        },
      })
        .then((res) => {
          this.$message({
            message: res.data,
            type: "success",
          });
          this.getCategory();
        })
        .catch((err) => {
          console.log("err", err);
        });
      this.dialogFormVisible = false;
      this.form.Name = "";
      this.form.coverUrl = "";
    },
    //删除分类数据
    delCategory(id) {
      this.loading = true;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios
            .post(
              "http://127.0.0.1:8080/Category/del",
              {},
              {
                headers: {
                  "content-type": "application/x-www-form-urlencoded",
                },
                params: {
                  id: id,
                },
              }
            )
            .then((res) => {
              this.$message({
                type: "success",
                message: res.data,
              });
              this.getCategory();
              this.pageIndex = 1;
            })
            .catch((err) => {
              console.error(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
          this.loading = false;
        });
    },
    //修改
    updateCategory(row) {
      this.dialogUpdateVisible = true;
      this.updateForm = JSON.parse(JSON.stringify(row));
    },
    //保存修改
    saveUpdate() {
      this.loading = true;
      this.axios({
        method: "post",
        url: "http://127.0.0.1:8080/Category/update",
        headers: {
          "content-type": "application/x-www-form-urlencoded",
        },
        params: {
          Id: this.updateForm.Id,
          Name: this.updateForm.Name,
          coverUrl: this.updateForm.Cover,
        },
      })
        .then((res) => {
          this.$message({
            message: res.data,
            type: "success",
          });
          this.getCategory();
        })
        .catch((err) => {
          console.log("err", err);
        });
      this.dialogUpdateVisible = false;
    },
    //改变当前页数
    changePages(index) {
      this.pageIndex = index;
    },
    //上传封面成功
    handleAvatarSuccess(res) {
      this.form.coverUrl = res;
    },
    //上传修改封面成功
    handleUpdateSuccess(res) {
      this.updateForm.Cover = res;
    },
  },
  mounted() {
    this.getCategory();
  },
};
</script>

<style lang="less" scoped>
.toolBar {
  padding: 10px;
}
.el-input {
  width: 300px;
}
.el-pagination {
  position: absolute;
  bottom: 20px;
  left: 50%;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>